<template>
  <div>
    采购入库页面
    <!-- 查询 -->
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="purOrderVO" class="demo-form-inline">
        <!-- 查询条件 -->
        <el-col :span="6">
        <el-form-item label="订单编号" >
          <el-input v-model="purOrderVO.ordernum" placeholder="请输入订单编号" widht="20px" ></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="供应商">
          <el-select v-model="purOrderVO.supplier.sid" placeholder="请选择" clearable>
            <el-option v-for="item in suppliers" :key="item.sid" :label="item.sname" :value="item.sid" ></el-option>  
          </el-select>
        </el-form-item>
        </el-col>
        <el-form-item label="要求交期">
          <el-date-picker v-model="purOrderVO.startdate" type="date" placeholder="选择开始日期"></el-date-picker>
          &nbsp;
          <el-date-picker v-model="purOrderVO.enddate" type="date" placeholder="选择结束日期"></el-date-picker>
        </el-form-item>
        <el-col :span="6">
        <el-form-item label="合计范围" class="priceFormItem" prop="minisummoney">
          <el-input v-model="purOrderVO.minsummoney" class="priceInput" style="width: 70px; margin-right: 20px"/>-
          <el-input v-model="purOrderVO.maxsummoney" class="priceInput" ref="maxsummoney" style="width: 70px; margin-left: 20px"/>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="交货方式">
          <el-select v-model="purOrderVO.deliverytype" placeholder="请选择交货方式">
            <el-option label="不限" value=""></el-option>
            <el-option label="送货" value="送货"></el-option>
            <el-option label="邮寄" value="邮寄"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="订单状态">
          <el-select v-model="purOrderVO.orderstatus" placeholder="请选择订单状态">
            <el-option label="不限" value=""></el-option>
            <el-option label="未入库" value="未入库"></el-option>
            <el-option label="待入库" value="待入库"></el-option>
            <el-option label="已入库" value="已入库"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="queryNoteButton">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          <!-- <el-button type="success" @click="exportExcel">导出数据</el-button> -->
        </el-form-item><br/>
        </el-col>
      </el-form>
    </div>
  <!-- 展示数据 -->
    <div >
      <el-table :data="pageBean.beanList" style="widtindexh: 100%"  :default-sort = "{prop: 'ordernum', order: 'descending'}">
        <el-table-column fixed type="index" label="序号" width="55" :index="Nindex"></el-table-column>
        <el-table-column fixed prop="ordernum" label="订单编号" width="170" sortable></el-table-column>
        <el-table-column fixed prop="supplier.sname" label="供应商名称" width="190"></el-table-column>
        <el-table-column prop="orderdate" label="订货日期" width="120"></el-table-column>
        <el-table-column prop="demanddelivery" label="要求交期" width="120"></el-table-column>
        <el-table-column prop="summoney" label="合计" width="120"></el-table-column>
        <el-table-column prop="deliverytype" label="交货方式" width="140"></el-table-column>
        <el-table-column prop="orderstatus" label="订单状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.orderstatus === '已入库' ? 'success' : scope.row.orderstatus === '待入库' ? 'primary' : 'danger'" disable-transitions>{{scope.row.orderstatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="notes" label="备注" width="120" show-overflow-tooltip></el-table-column> 
        <el-table-column prop="createdate" label="创建时间" width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="add(scope.$index, scope.row)">入库</el-button>
            <el-button type="primary" plain @click="cancelNote(scope.$index, scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5 ,7]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      >
      </el-pagination>
    </div>
    <!-- //入库新增模态框 -->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormUnloadGoods" @close="closeDialog" >
      <el-form :rules="rules" :model="addUnloadGoods" ref="addUnloadGoods" label-width="80px" :inline="true" class=“demo-form-inline v-if="dialogFormTitle=='填写入库信息'">
        <el-form-item label="商品名称" prop="gname">
          <el-select v-model="addUnloadGoods.gname"    clearable  placeholder="请选择">
          <el-option
            v-for="item in goods"
            :key="item.gid"
            :label="item.gname"
            :value="item.gname">
            <span>{{item.gname}}</span>
            <span> 库余：{{item.sum}}</span>
            </el-option>
      </el-select>
      </el-form-item>
        <el-form-item label="入库数" prop="currentNumber">
          <el-input v-model="addUnloadGoods.currentNumber"></el-input>
        </el-form-item>
        <el-form-item label="送货人" prop="deliveryMan">
          <el-input v-model="addUnloadGoods.deliveryMan"></el-input>
        </el-form-item>
        <el-form-item label="送货单号" prop="deliveryNo">
          <el-input v-model="addUnloadGoods.deliveryNo" ></el-input>
        </el-form-item>
        <el-form-item label="预计入库时间" prop="storageTime">
          <div class="block">
            <el-date-picker
              v-model="addUnloadGoods.storageTime"
              align="right"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd"
              :picker-options="pickerOptions">
            </el-date-picker>
      </div>
        </el-form-item>
        <el-form-item label="审批人" prop="approveMan">
          <el-select v-model="addUnloadGoods.approveMan"   clearable  placeholder="请选择">
          <el-option
          v-for="item in employee"
          :key="item.eid"
          :label="item.ename"
          :value="item.ename">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="addUnloadGoods.source"   clearable  placeholder="请选择">
          <el-option
          v-for="item in sources"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addUnloadGoods.unloadgoodsDesc" ></el-input>
        </el-form-item>
        <el-form-item label="上传附件">
          <el-input v-model="addUnloadGoods.annex" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="notOK">取 消</el-button>
        <el-button type="primary" @click="OK1();OK2()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios';  
export default {
  name: 'App',
  data() {
    return {
      rulers:{
        gname:[{required: true, trigger: 'blur'}], 
        currentNumber:[{required: true, trigger: 'blur'}],
      },
      dialogFormTitle:"",
      sample: {},
      pageBean: [],
      pageIndex: 1,
      pageSize: 5,
      purOrderVO: {supplier:{sid:null},purGoods:{gid:null}},
      suppliers:[],
      purOrderAdd:{ supplier:{sid:null}, purGoods:{gid:null}},
      purGoodss:[{gid:null,perprice:null,productUnit:null}],
      perprice: '', 
      amount: '', 
      dialogFormVisible: false,
      
    //查询列表
      unloadGoodsDTO: {},
      //是否入库
      isunloads: [{
          value: '已入库',
          label: '已入库'
        }, {
          value: '待入库',
          label: '待入库'
        }, {
          value: '未入库',
          label: '未入库'
        }],
        value: '',
      //列表数据值
      pageBean: {},
      //模态框标题
      dialogFormTitle:'',
      //模态框状态
      dialogFormUnloadGoods:false,
      addUnloadGoods:{},
      //模态框查询人员
      employee: [],
      //货物信息
      goods:[],
      //来源
      sources: [{
          value: '采购入库',
          label: '采购入库'
        }, {
          value: '销售退货',
          label: '销售退货'
        }, {
          value: '生产入库',
          label: '生产入库'
        }],
      ///日期选择
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
       
    };
  },
  mounted() {
    this.getAllNote();
    this.getAllSupplier();
    this.getAllPurGoods();
    
    this.findEmployee();
    this.findgoods();
  },

  methods: {
    cancelNote(index, row) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
      if (row.orderstatus === '已入库') {
        this.$message('该商品已经入库了，不能取消订单');
      }else{
        this.$axios.post("/purnote/removeNoteByOid/"+ row.oid).then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                type: "success",
                message: "删除成功!",
              });
                //起到刷新页面的作用
                this.getAllNote();
              }
        });
        }
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    //  exportExcel() {  
    //   axios({  
    //     url: 'http://localhost:8080/api/excel/export', // 替换为你的后端接口URL  
    //     method: 'GET',  
    //     responseType: 'blob', // 响应类型需要是blob以便下载文件  
    //   })  
    //   .then((response) => {  
    //     const url = window.URL.createObjectURL(new Blob([response.data]));  
    //     const link = document.createElement('a');  
    //     link.href = url;  
    //     link.setAttribute('download', 'data.xls'); // 设置下载的文件名  
    //     document.body.appendChild(link);  
    //     link.click();  
    //     link.parentNode.removeChild(link); // 清理添加的a标签  
    //     window.URL.revokeObjectURL(url); // 释放URL对象  
    //   })  
    //   .catch((error) => {  
    //     console.error('导出Excel失败:', error);  
    //   });  
    // },
       
    // printTable() {
    //   html2canvas(document.querySelector("#app")).then(canvas => {
    //     const imgData = canvas.toDataURL('image/png');
    //     printJS({ printable: imgData, type: 'image' });
    //   });
    // },
    //重置按钮
    reset() {
      this.purOrderVO={supplier:{sid:null}};
      this.getAllNote();
    },
    queryNoteButton() {
      this.pageIndex = 1;
      this.pageSize = 5;
      this.getAllNote();
    },
      changegoods(item){
        console.log("切换",item);
      },
    
      ///这是审核功能的前端实现
      changeState(row,str){
            console.log(row,str);
            row.isApprove=str;
          if(str=='通过'){
            row.isunload='已入库';
          }
          this.$axios.post("http://localhost:8080/unloadgoods/modify",row).then(resp=>{
          if(resp.data.code == 200){
              this.$message(resp.data.msg);
          }else{
              this.$message(resp.data.msg);
          }
          this.getAllNote();
          this.findgoods();
        });
      },
      //c查询人员
      findEmployee(){
        this.$axios.get("http://localhost:8080/employee/find").then(resp=>{
          if(resp.data.code == 200){
              this.employee=resp.data.data;
              console.log(resp.data.data);
              console.log(this.employee);
          }
        });
      },
       //c查询商品信息
       findgoods(){
        this.$axios.get("http://localhost:8080/goods/findEntity").then(resp=>{
          if(resp.data.code == 200){
              this.goods=resp.data.data;
              console.log(resp.data.data);
              console.log(this.goods);
          }
        });
      },
      //模态框关闭
      closeDialog(){
        this.addUnloadGoods={ supplier:{sid:null}, purGoods:{gid:null}};
      },
       //内嵌表单的取消
      notOK() {
        this.dialogFormUnloadGoods=false;
        
      },
      add(index, row){
      if (row.orderstatus === '已入库') {
        alert('该商品已经入库了，不能重复操作');
      } else if(row.orderstatus === '待入库'){
        alert('请等待仓库管理员的审核~');
      }
      else {
        this.dialogFormUnloadGoods=true;
        this.dialogFormTitle = "填写入库信息";
        this.addUnloadGoods.oid=row.oid;
      }
      },
      //内嵌表单的提交
      OK1:function(){
				this.dialogFormTitle='填写入库信息';
        this.dialogFormUnloadGoods=false;
        this.$axios.post("http://localhost:8080/unloadgoods/add",this.addUnloadGoods).then(rep=>{
          this.$message(rep.data.msg);
         // this.getAllNote();
          this.addUnloadGoods={};
        });
			},
      OK2:function(){
        console.log(this.addUnloadGoods.oid);
				this.$axios.post("http://localhost:8080/purnote/modifyNotestatusByoid/"+this.addUnloadGoods.oid).then(rep=>{
          this.$message("订单状态为待入库，等待仓库管理员审核");
          this.getAllNote();
        });
			},

      // OK2(){
      //   console.log(this.addUnloadGoods.oid);
      //   this.dialogFormTitle='填写入库信息';
      //   this.dialogFormUnloadGoods=false;
      // },
      // OK1(){
      //   console.log(this.addUnloadGoods.oid);
      //   this.dialogFormTitle='填写入库信息';
      //   this.dialogFormUnloadGoods=false;
      //   this.$axios.post("http://localhost:8080/unloadgoods/add",this.addUnloadGoods).then(rep=>{
      //     this.$message(rep.data.msg);
      //     this.getAllNote();
      //     this.addUnloadGoods={};
      //   });
      // },

    handleSelectionChange(val){
        this.multipleSelection=val;
    },
    toggleSelection() {
        console.log(this.multipleSelection);
      },
    closeForm(employeeModify) {
      //关闭校验(暂时没有);
      //this.$refs[employeeModify].resetFields();
    },
    //和修改共用一个内嵌模态框。
    addEmployee() {
      this.dialogFormVisible = true;
      this.dialogFormTitle = '新增人员';
    },
   
    //表单内嵌修改
    updateEmployee(row) {
      this.dialogFormVisible = true;
      this.dialogFormTitle ='修改人员';
      //复制一份属性
      this.employeeModify = { ...row };
    },
   
    
    //行删除
    handleClickBydelete(row) {
      console.log(row);
    },
  
    //提交
    onSubmit() {
      console.log("submit!");
      // console.log(this.employee);
        console.log("这是查询提交",this.unloadGoodsDTO);
      this.getAllNote();
    },

    //列出所有采购单
    getAllNote() {
      this.$axios.post("/purnote/getNoteList/" + this.pageIndex + "/" + this.pageSize,this.purOrderVO)
        .then((resp) => {
          if(resp.data.code==200){
            this.pageBean = resp.data.data;
          }
        });
    },
    
    //分页，连续的序号
    Nindex(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const pageIndex = this.pageIndex // 当前页码
      const pageSize = this.pageSize // 每页条数
      return index + 1 + (pageIndex - 1) * pageSize
    },
    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
     this.getAllNote();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
     this.getAllNote();
    },
    //查询所有商品
     getAllPurGoods() {
      this.$axios.get("/purgoods/findAll").then((resp) => {
        this.purGoodss = resp.data.data;
      });
    },
    
    //查询所有供应商
    getAllSupplier() {
      this.$axios.get("/supplier/findAll").then((resp) => {
        this.suppliers = resp.data.data;
      });
    },
    //查询
    getAll() {
      this.$axios
        .post(
          "http://localhost:8080/unloadgoods/getAll/" +
            this.pageIndex +
            "/" +
            this.pageSize,
          this.unloadGoodsDTO
        )
        .then((resp) => {
          console.log(resp.data.data.beanList);
          this.pageBean = resp.data.data;
        });
    },
  }
  
};

</script>

<style>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>